<template>
	<view class="content">
		<view class="nav">
			<view class="nav-list">
				<view class="icon">
					<u-icon name="bell" color="#000" size="50" @click="gomessage"></u-icon>
					<u-badge :offset="[-5,-10]" :absolute="true" max="99" :value="allMsgNum"></u-badge>
				</view>
				<view class="select">
					<view @click="getInterest">
						<text :class="showNav===1 ? 'nav-select' : '' ">关注</text>
					</view>
					<view>
						|
					</view>
					<view @click="getFind">
						<text :class="showNav===2 ? 'nav-select' : '' ">发现</text>
					</view>
					<view>
						|
					</view>
					<view @click="getWuhan">
						<text :class="showNav===3 ? 'nav-select' : '' ">{{city}}</text>
						<view class="icons">
							<uni-icons v-if="showicon==true" @click="getcity" type="down" size="20"
								color="#ec6531"></uni-icons>
						</view>

					</view>
				</view>
			</view>
		</view>
		<!-- 关注 -->

		<!-- 需要上拉加载和下拉刷新的子组件 -->
		<!-- <scroll-view scroll-y @scrolltolower="loadMore" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore" @refresherabort="onAbort" :refresher-triggered="isTriggered" refresher-enabled
			:style="{ height: '100vh' }">
			<interestVue v-if="showNav ==1" ref="childRef"></interestVue>
		</scroll-view> -->

		<interestVue v-if="showNav ==1" :interestList="interestList"></interestVue>

		<!-- 发现 -->
		<findVue v-if="showNav ==2" :momentlist="momentlist" :swiperList="swiperList"></findVue>

		<!-- 地区 -->
		<areaVue v-if="showNav ==3 " :AttractionList="AttractionList" :Attractiontotal="Attractiontotal"
			:PathList="PathList" ref="childRef" :Attractionimage="Attractionimage" :orderCount="orderCount">
		</areaVue>


		<cc-myTabbar :tabBarShow="0"></cc-myTabbar>

	</view>
</template>

<script>
	import findVue from '../../components/find.vue'
	import interestVue from '../../components/interest.vue'
	import areaVue from '../../components/area.vue'
	import image from '../../uni_modules/uview-ui/libs/config/props/image'

	export default {
		data() {
			return {
				showNav: 2, //1关注 2发现 3武汉
				interestList: [], //关注列表数据
				interesttotal: 1, //关注列表数据总条数
				AttractionList: [], //列表数据
				Attractiontotal: 1,
				PathList: [],
				city: '',
				momentlist: [],
				momenttotal: 1,
				swiperList: [],
				Attractionimage: "",
				currentComponent: 'ComponentA',
				page: {
					pageNum: 1,
					pageSize: 10,
				},
				page1: {
					pageNum: 1,
					pageSize: 10,
				},
				orderCount: 0,
				minDate: new Date(),
				endDate: '',
				mode: 1,
				showicon: false
			}
		},
		computed: {
			allMsgNum() {
				return this.$store.state.allMsgNum
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			if (options.showNav == 3) {
				this.getWuhan()
			}
			if (options.showNav == 2) {
				this.getFind()
			}
			// setTimeout(() => {
			// let token = uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
			// if (token) {
			this.getmomentlist()
			this.getcarousel()
			// }
			// }, 0)

		},
		// 下拉刷新
		onPullDownRefresh() {
			// 刷新数据的逻辑
			this.page.pageNum = 1
			this.page.pageSize = 10
			this.getAttractionList()
			// 模拟异步操作
			setTimeout(() => {
				// 刷新完成后，结束下拉刷新
				uni.stopPullDownRefresh();
			}, 500);
		},
		// 上拉加载
		onReachBottom() {
			this.loadMore();
			this.AttractionListloadMore()
		},
		methods: {
			// 关注
			getInterest() {
				this.showicon = false
				this.showNav = 1
				this.getUserFocusList()
			},
			// 发现
			getFind() {
				this.showicon = false
				this.showNav = 2
				this.getmomentlist()
				this.getcarousel()
			},
			// 武汉
			getWuhan() {
				this.showNav = 3
				this.showicon = true
				this.getAttractionList()
				this.getPackageList()
				this.$nextTick(() => {
					if (this.$refs.childRef && this.$refs.childRef.mockFetchMessages) {
						this.$refs.childRef.mockFetchMessages();
						// return;
					}
				});

			},
			getcity() {
				uni.navigateTo({
					url: '/packagesIndex/pages/cityPicker/cityPicker'
				})
			},
			// 获取关注列表数据
			async getUserFocusList() {
				let res = await this.$u.api.getUserFocusList(this.page)
				if (res.code == 200) {
					// 如果是第一页，直接替换数据
					if (this.page.pageNum == 1) {
						this.interestList = res.rows;
					} else {
						// 如果不是第一页，追加数据
						this.interestList = [...this.interestList, ...res.rows];
					}
					this.interesttotal = res.total;
				}
			},

			// 获取景点列表
			async getAttractionList() {
				let res = await this.$u.api.getAttractionList()
				if (res.code == 200) {
					this.AttractionList = res.rows
						.map(item => {
							// 将 images 字符串转换为数组对象
							const imagesArray = item.images?this.$u.fileBaseUrl + item.images:'/static/images/index/zwtp.png'
							return {
								...item,
								images: imagesArray,
								title:item.name
							};
						})
				}
			},
			// 获取路线列表
			// async getPathList() {
			// 	let res = await this.$u.api.getPathList()
			// 	if (res.code == 200) {
			// 		this.PathList = res.rows
			// 	}
			// },

			async getPackageList() {
				let res = await this.$u.api.getPackageList()
				if (res.code == 200) {
					this.PathList = res.rows.slice(0, 3)
				}
			},
			// 获取发现旅游攻略
			async getmomentlist() {
				let res = await this.$u.api.getmomentlist(this.page1)
				if (res.code == 200) {
					if (this.page1.pageNum == 1) {
						this.momentlist = res.rows;
					} else {
						// 如果不是第一页，追加数据
						this.momentlist = [...this.momentlist, ...res.rows];
					}
					this.momenttotal = res.total
				}
			},
			// 获取轮播图
			async getcarousel() {
				let res = await this.$u.api.getcarousel()
				if (res.code == 200) {
					this.swiperList = res.rows.map(item => {
							// 将 images 字符串转换为数组对象
							const imagesArray = this.$u.fileBaseUrl + item.imgUrl.trim()
							return {
								...item,
								imgUrl: imagesArray,
							};
						})
				}
			},
			// 跳转到消息页面
			gomessage() {
				uni.reLaunch({
					url: '/pages/message/message'
				})
			},
			loadMore() {
				if (this.showNav != 1) return
				uni.$emit('onReachBottom') // 设置监听事件
				if (this.interestList.length >= this.interesttotal) {
					uni.showToast({
						title: '没有更多关注了',
						icon: "none"
					});
					return;
				}
				this.page.pageNum += 1;
				uni.showLoading({
					title: '加载中...'
				});

				this.getUserFocusList().then(() => {
					uni.hideLoading();
				}).catch(error => {
					console.error('加载更多数据时出错:', error);
					uni.hideLoading();
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				});
			},
			AttractionListloadMore() {
				if (this.showNav != 2) return
				uni.$emit('onReachBottom') // 设置监听事件
				if (this.momentlist.length >= this.momenttotal) {
					uni.showToast({
						title: '没有更多游玩攻略了',
						icon: "none"
					});
					return;
				}
				this.page1.pageNum += 1;
				uni.showLoading({
					title: '加载中...'
				});
				
				this.getmomentlist()

				// this.getmomentlist().then(() => {
				// 	uni.hideLoading();
				// }).catch(error => {
				// 	console.error('加载更多数据时出错:', error);
				// 	uni.hideLoading();
				// 	uni.showToast({
				// 		title: '加载失败，请重试',
				// 		icon: 'none'
				// 	});
				// });
			}

		},
		components: {
			findVue,
			interestVue,
			areaVue,
		},
		onShow() {
			let token = uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
			if (token) {
				this.city = uni.getStorageSync('city') // 获取当前城市
				this.getAttractionList()
				this.getPackageList()
				let userInfo = uni.getStorageSync('userInfo')
				this.orderCount = userInfo.orderCount
				this.$nextTick(() => {
					if (this.$refs.childRef && this.$refs.childRef.mockFetchMessages) {
						this.$refs.childRef.mockFetchMessages();
					}
				});
				this.$nextTick(() => {
					if (this.$refs.childRef && this.$refs.childRef.getUserFocusList) {
						this.$refs.childRef.getUserFocusList();
						// return;
					}
				});
			}
			uni.hideLoading()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		// padding-bottom: 140rpx;
	}

	.content {
		width: 100%;
		font-size: 32rpx;
		box-sizing: border-box;
		padding-bottom: 10rpx;
		background-color: #ffffff;


		.nav {
			width: 100%;
			height: 120rpx;
			position: fixed;
			padding: 150rpx 43rpx 64rpx 30rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			z-index: 999;
			border-bottom: 1rpx solid #EFEFEF;

			.nav-list {
				width: 100%;
				display: flex;
				align-items: center;

				.icon {
					width: 20%;
					position: relative;
				}

				.select {
					width: 70%;
					display: flex;
					justify-content: space-around;
					align-items: center;

					view {
						color: #666666;
						font-size: 32rpx;
						align-items: center;
						height: 50rpx;

						text {
							display: inline-block;
							padding-bottom: 10rpx;
							box-sizing: border-box;
						}

						&:nth-child(2) {
							color: #c1c1c1;
						}

						&:nth-child(4) {
							color: #ccc;
						}

						&:nth-child(5) {
							display: flex;
							align-items: center;
							width: 130rpx;
							text-align: center;

							.icons {
								width: 30rpx;
							}
						}
					}

					.nav-select {
						color: $overall-color;
						border-bottom: 2rpx solid $overall-color;
					}
				}
			}
		}

		.tabbar {
			position: fixed;
			bottom: 0;
		}
	}
</style>